import Taro, { Component } from '@tarojs/taro';
import { View, Input, Image } from '@tarojs/components';
import CardMove from '../../../components/card-move';
import NavigationBar from '../../../components/navigationBar/index';
import MultiTextModal from '../../../components/multi-text-modal/index';
// import Next from '../../../static/user/icon_next.png';

import './index.scss';
import { getCardInfo } from '../../../services/user';



class ActivateCard extends Component {
  config = {
    navigationBarTitleText: '激活卡',
  };

  animation = null;

  state = {
    pageX: '',
    animationData: '',
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
    cardNo: '',
    isShowModal: false,
    contentArr: null,
    cardList: [],
  }

  componentWillUnmount() {}

  componentWillMount() {
    this.setState({
      cardNo: this.$router.params.cardNo
    }, () => {
    })
  }

  componentDidShow() {
    const animation = Taro.createAnimation({
      duration: 300,
      timingFunction: 'ease',
      delay: 0
    });
    this.animation = animation;
  }

  componentDidHide() { }

  onReachBottom() {
    console.log('onReachBottom');
  }

  scanCard() {
    getCardInfo({
      card_no: this.state.cardNo
    }).then(data => {
      let list = this.state.cardList
      if (list.find(item => {
        return item.id === data.id
      })) {
        Taro.showToast({
          title: '已经添加过该卡',
          icon: 'none'
        })
        return
      }
      list.unshift(data)
      let contentArr = [
        {
          key: '卡号',
          value: data.card_no
        },
        {
          key: '类型',
          value: data.attr_name
        }
      ]
      this.setState({
        contentArr: contentArr,
        cardList: list,
        isShowModal: true,
      })
    })
  }

  addCard = () => {
    this.scanCard()
  }

  activateCard = () => {
    Taro.navigateTo({
      url: `/subPackageWork/pages/apply-success/index`
    });
  }

  cancleCb() {
    this.setState({
      isShowModal: false
    })
  }

  confirmCb() {

  }


  render() {
    const { animationData, isShowModal, contentArr } = this.state;
    return (
      <View className='activate-card' style={`margin-top: ${navigationBarHeight}`}>
        <NavigationBar text="激活卡" />
        {isShowModal && <MultiTextModal title="兑换卡" confirmText="去付款" contentArr={contentArr} cancleCb={this.cancleCb.bind(this)} confirmCb={this.confirmCb.bind(this)} />}
        <CardMove card="212323132" sku="打算" />
        <CardMove card="212323132" sku="打算" />
        <CardMove card="212323132" sku="打算" />
        <CardMove card="212323132" sku="打算" />
        <CardMove card="212323132" sku="打算" />
        <CardMove card="212323132" sku="打算" />
        <CardMove card="212323132" sku="打算" />
        <CardMove card="212323132" sku="打算" />
        <CardMove card="212323132" sku="打算" />
        <CardMove card="212323132" sku="打算" />
        <View className="btn-box">
          <View className="btn add-btn" onClick={this.addCard}>继续添加</View>
          <View className="btn activate-btn" onClick={this.activateCard}>全部激活</View>
        </View>
      </View>
    );
  }
}

export default ActivateCard;
